<template>
  <div>
    <!-- 场景选择和模拟年限 -->
    <a-card title="场景设置" bordered style="margin-bottom: 10px">
      <a-row :gutter="16">
        <a-col span="12">
          <a-form-item label="选择场景（可多选）">
            <a-select
              v-model="selectedScenarios"
              mode="multiple"
              placeholder="请选择场景"
              style="width: 270px"
            >
              <a-select-option value="A">场景A</a-select-option>
              <a-select-option value="B">场景B</a-select-option>
              <a-select-option value="C">场景C</a-select-option>
              <a-select-option value="D">场景D</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col span="12">
          <a-form-item label="模拟年限">
            <a-input-number
              v-model="simulationYears"
              min="1"
              max="10"
              style="width: 270px"
            />
          </a-form-item>
        </a-col>
      </a-row>
    </a-card>

    <!-- 模拟结果图表 -->
    <a-card title="模拟结果图表" bordered style="margin-bottom: 10px">
      <a-radio-group v-model="chartType" @change="updateChart" button-style="solid">
        <a-radio-button value="line">折线图</a-radio-button>
        <a-radio-button value="bar">柱状图</a-radio-button>
      </a-radio-group>
      <div style="height: 400px; margin-top: 20px">
        <Echart :option="chartOptions" name="chartOptions" />
      </div>
    </a-card>

    <!-- 模拟结果数据表 -->
    <a-card title="模拟结果数据表" bordered style="margin-bottom: 10px">
      <a-table :dataSource="tableData" :columns="tableColumns" rowKey="time" />
    </a-card>

    <!-- 场景对比区域 -->
    <a-card title="场景对比区域" bordered>
      <a-list bordered :dataSource="comparisonData" style="width: 100%">
        <template #renderItem="{ item }">
          <a-list-item>
            <a-list-item-meta :title="item.title" :description="item.description" />
          </a-list-item>
        </template>
      </a-list>
    </a-card>
  </div>
</template>

<script setup>
import { computed, ref } from "vue";
import Echart from "/@/components/e-chart.vue";
// 场景和年限选择
const selectedScenarios = ref(["A", "B"]);
const simulationYears = ref(1);
const chartType = ref("line");

// 模拟数据表格内容
const tableData = ref([
  { scenario: "A", time: "2023-01", emissions: 200 },
  { scenario: "A", time: "2023-02", emissions: 210 },
  { scenario: "A", time: "2023-03", emissions: 220 },
  { scenario: "B", time: "2023-01", emissions: 180 },
  { scenario: "B", time: "2023-02", emissions: 190 },
  { scenario: "B", time: "2023-03", emissions: 200 },
  { scenario: "C", time: "2023-01", emissions: 220 },
  { scenario: "C", time: "2023-02", emissions: 230 },
  { scenario: "C", time: "2023-03", emissions: 240 },
  { scenario: "D", time: "2023-01", emissions: 240 },
  { scenario: "D", time: "2023-02", emissions: 250 },
  { scenario: "D", time: "2023-03", emissions: 260 },
]);

// 表格列定义
const tableColumns = [
  { title: "场景", dataIndex: "scenario", key: "scenario" },
  { title: "时间", dataIndex: "time", key: "time" },
  { title: "碳排放量（吨）", dataIndex: "emissions", key: "emissions" },
];

// 场景对比数据
const comparisonData = ref([
  { title: "场景A vs 场景B", description: "场景A与场景B在不同时间点的碳排放量对比" },
  { title: "关键指标对比", description: "展示场景A与场景B的关键指标差异" },
]);

// ECharts 配置
const chartOptions = computed(() => {
  return {
    title: { text: "模拟结果图表", left: "center" },
    tooltip: { trigger: "axis" },
    legend: { data: selectedScenarios.value.map((s) => `场景${s}`), top: "bottom" },
    xAxis: { type: "category", data: ["2023-01", "2023-02", "2023-03"] },
    yAxis: { type: "value", name: "碳排放量（吨）" },
    series: selectedScenarios.value.map((scenario) => ({
      name: `场景${scenario}`,
      type: chartType.value,
      data: tableData.value
        .filter((d) => d.scenario === scenario)
        .map((d) => d.emissions),
      smooth: true,
    })),
  };
});

// 更新图表数据
const updateChart = (e) => {
  console.log(e);
  chartOptions.value.series = selectedScenarios.value.map((scenario) => ({
    name: `场景${scenario}`,
    type: chartType.value,
    data: tableData.value.filter((d) => d.scenario === scenario).map((d) => d.emissions),
    smooth: true,
  }));
};
</script>

<style scoped>
a-card {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}
</style>
